<template>
  <div class="app-container planCalendar">
    <div class="planCalendar_box">
      <div style="font-size: 16px;margin-bottom: 20px;"
        class="big_title_style">
        排班日历
      </div>
      <div class="plan_table"
        v-loading="loading">
        <div class="plan_th">
          <div class="plan_td plan_td_role">
            <!-- <el-select v-model="roleType"
                placeholder="请选择"
                style="width: 120px;"
                size="small"
                @change="toChangeSelectRole">
                <el-option v-for="item in postList"
                  :key="item.postId"
                  :label="item.postName"
                  :value="item.postId">
                </el-option>
              </el-select> -->
          </div>
          <div class="plan_td plan_td_name">门店名称</div>
          <div class="plan_td plan_td_change">班次</div>
          <div class="plan_td plan_td_data">
            <i class="el-icon-arrow-left change_month_icon"
              @click="toPrevMonth"></i>
            <div class="show_currnet_month">{{ currentYear }}年{{ currentMonth }}月</div>
            <i class="el-icon-arrow-right change_month_icon"
              @click="toNextMonth"></i>
          </div>
        </div>
        <div class="plan_table_list"
          ref="planTableList"
          :style="{ overflow: tableData.length == 0 ? 'hidden' : 'auto' }">
          <div class="plan_tr"
            v-for="(item, index) in tableData"
            :key="index">
            <div class="plan_td plan_td_role"
              :style="{ left: `${stepLeft}px` }"
              :title="item.serviceTypeStr">
              {{ item.serviceTypeStr }}</div>
            <div class="plan_td plan_td_name"
              :style="{ left: `${stepLeft + 120}px` }"
              :title="item.storeName">
              {{ item.storeName }}</div>
            <div class="plan_td plan_td_change"
              :class="{ 'plan_td_shadow': stepLeft > 0 }"
              :style="{ left: `${stepLeft + 320}px` }">
              <el-radio-group v-model="item.workTypeAll"
                @change="toChangeAllStatus(index, $event)">
                <el-radio class="el-radio_item"
                  label="morning">早班</el-radio>
                <el-radio class="el-radio_item"
                  label="night">晚班</el-radio>
              </el-radio-group>
            </div>
            <div class="plan_td_list">
              <div class="plan_td_box"
                v-for="(val, idx) in item.technicianWorkPlan"
                :key="idx">
                <div class="plan_td plan_td_header"
                  v-if="index == 0">{{ idx + 1 }}号({{ val.weekDay }})</div>
                <div class="plan_td plan_td_item">
                  <el-radio-group v-model="val.workType"
                    @change="toChangeStatus(index, idx, $event)">
                    <el-radio class="el-radio_item"
                      label="morning">早</el-radio>
                    <el-radio class="el-radio_item"
                      label="night">晚</el-radio>
                    <el-radio class="el-radio_item"
                      label="rest">休</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </div>
          </div>
          <div class="plan_empty"
            v-if="tableData.length == 0">
            <div class="plan_empty_tr">
              <div class="plan_td_header"
                v-for="(item, idx) in curDays"
                :key="idx">{{ idx + 1 }}号</div>
            </div>
            <el-empty description="暂无数据"></el-empty>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
  
<script>
import { toSetOneDayPlan, toSetMonthPlan, getPlanRole } from "@/api/service/workSet"
import { getPlanList } from "@/api/service/store"

export default {
  data () {
    return {
      tableData: [],
      loading: false,
      stepLeft: 0,
      currentYear: '',
      currentMonth: '',
      startDate: '',
      endDate: '',
      roleType: '',
      postList: [{
        postId: '',
        postName: '全部角色'
      }],
      curDays: 0,
      weekList: ['日', '一', '二', '三', '四', '五', '六'],
    }
  },
  created () {
    let nowDate = new Date()
    let y = nowDate.getFullYear(), m = nowDate.getMonth() + 1
    this.currentYear = y
    this.currentMonth = m
    this.getDateStep()
    this.getDataList()
    //   this.toGetPlanRoleList()
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.planTableList.addEventListener('scroll', this.planTableScroll, true)
    })
  },
  beforeDestroy () {
    this.$refs.planTableList.removeEventListener('scroll', this.planTableScroll)
  },
  methods: {
    toPrevMonth () {
      if (this.currentMonth > 1) {
        this.currentMonth--
      } else {
        this.currentMonth = 12
        this.currentYear--
      }
      this.getDateStep()
      this.getDataList()
    },
    toNextMonth () {
      if (this.currentMonth < 12) {
        this.currentMonth++
      } else {
        this.currentMonth = 1
        this.currentYear++
      }
      this.getDateStep()
      this.getDataList()
    },
    async toGetPlanRoleList () {
      let res = await getPlanRole()
      if (res) {
        this.postList.push(...res.rows)
      }
    },
    toChangeSelectRole () {
      this.getDataList()
    },
    toChangeAllStatus (index, type) {
      let str = type == 'morning' ? '早班' : '晚班'
      this.$confirm(`确认统一修改为 ${str}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let item = this.tableData[index]
        toSetMonthPlan({
          technicianId: null,
          storeId: item.storeUid,
          startDate: this.startDate,
          endDate: this.endDate,
          workType: type,
          workStatus: '1'
        })
          .then(res => {
            this.tableData[index].technicianWorkPlan.forEach(val => {
              val.workType = type
              val.workStatus = '1'
            })
            this.tableData[index].workTypeAll = ''
            this.msgSuccess('修改成功')
          })
      }).catch(() => {
        this.tableData[index].workTypeAll = ''
      });
    },
    toChangeStatus (index, idx, type) {
      let item = this.tableData[index], val = item.technicianWorkPlan[idx]
      toSetOneDayPlan({
        technicianId: null,
        storeId: item.storeUid || '',
        planId: val.planId || '',
        workDate: val.workDate,
        workType: type,
        workStatus: type == 'rest' ? '0' : '1'
      })
        .then(res => {
          this.msgSuccess('修改成功')
        })
    },
    planTableScroll () {
      this.stepLeft = this.$refs.planTableList.scrollLeft
    },
    getDateStep () {
      let year = this.currentYear, month = this.currentMonth
      let days = new Date(year, month, 0).getDate()
      if (month < 10) month = '0' + month
      this.startDate = `${year}-${month}-01`
      this.endDate = `${year}-${month}-${days}`
    },
    async getDataList () {
      this.loading = true
      let res = await getPlanList({
        startDate: this.startDate,
        endDate: this.endDate,
        postId: this.roleType
      })
      if (res) {
        let data = res.rows, headDate = this.startDate.substring(0, 7), days = new Date(this.currentYear, this.currentMonth, 0).getDate()
        this.curDays = days
        data.forEach(item => {
          let list = []
          for (let i = 1; i <= days; i++) {
            let d = i < 10 ? '0' + i : i, date = `${headDate}-${d}`
            list[i - 1] = {
              workDate: date,
              workStatus: '',
              workType: '',
              weekDay: `星期${this.weekList[new Date(date).getDay()]}`
            }
            item.technicianWorkPlan.forEach(val => {
              if (val.workDate == date) {
                list[i - 1] = {
                  ...val,
                  weekDay: `星期${this.weekList[new Date(date).getDay()]}`
                }
              }
            })
          }
          item.technicianWorkPlan = list
          item.workTypeAll = ''
        })
        this.loading = false
        if (this.$refs.planTableList) {
          this.$refs.planTableList.scrollTo({
            left: 0
          })
        }
        this.tableData = data
      }
    }
  }
}
</script>
  
<style lang="scss" scoped>
.planCalendar {
  height: 100%;

  .planCalendar_box {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    min-height: 100%;
  }
}

.el-radio_item {
  &:not(:last-child) {
    margin-right: 10px;
  }
}

::v-deep .el-input__inner {
  color: #333;
  font-weight: 600;
}

.plan_table {
  width: 100%;
  height: auto;
  border: 1px solid #eee;
  padding-top: 40px;
  position: relative;

  .plan_th {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    .plan_td {
      height: 80px;
      font-size: 14px;
      color: #333;
      font-weight: 600;
      border-bottom: 1px solid #eee;

      &:not(:last-child) {
        border-right: 1px solid #eee;
      }
    }

    .plan_td_role,
    .plan_td_name,
    .plan_td_change {
      width: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      background-color: #fff;
      position: relative;
      z-index: 10;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .plan_td_name {
      width: 200px;
    }
    .plan_td_change {
      width: 140px;
    }

    .plan_td_data {
      flex: 1;
      overflow: hidden;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;

      .change_month_icon {
        font-size: 24px;
        cursor: pointer;
      }

      .show_currnet_month {
        margin: 0 10px;
      }
    }
  }

  .plan_table_list {
    width: 100%;
    overflow: auto;
    padding-top: 40px;
  }

  .plan_tr {
    white-space: nowrap;
    position: relative;
    padding-left: 460px;

    .plan_td {
      display: inline-block;
      height: 40px;
      width: 120px;
      line-height: 20px;
      text-align: center;
      font-size: 14px;
      color: #333;
      padding: 10px;
      border-bottom: 1px solid #eee;

      &:not(:last-child) {
        border-right: 1px solid #eee;
      }
    }

    .plan_td_role,
    .plan_td_name,
    .plan_td_change {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      background-color: #fff;
    }

    .plan_td_name {
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .plan_td_name {
      left: 120px;
    }

    .plan_td_change {
      width: 140px;
      left: 240px;
    }

    .plan_td_shadow {
      box-shadow: 10px 0 10px -4px rgba(0, 0, 0, 0.1);
    }

    .plan_td_list {
      display: inline-block;
      white-space: nowrap;

      .plan_td_box {
        width: 160px;
        display: inline-block;
        position: relative;

        &:not(:last-child) {
          .plan_td_item {
            border-right: 1px solid #eee;
          }
        }
      }

      .plan_td_header {
        width: 100%;
        position: absolute;
        top: -40px;
        left: 0;
      }

      .plan_td_item {
        width: 100%;
      }
    }
  }
}

.plan_empty {
  position: relative;

  .plan_empty_tr {
    white-space: nowrap;
    position: relative;
    padding-left: 380px;
    position: absolute;
    top: -40px;
    left: 0;
  }

  .plan_td_header {
    display: inline-block;
    height: 40px;
    width: 120px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    color: #333;
    padding: 10px;
    border-bottom: 1px solid #eee;

    &:not(:last-child) {
      border-right: 1px solid #eee;
    }
  }
}
</style>